﻿@page "/tags"
@inject IStringLocalizer<Tags> Localizer

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["SubTitle"]</h4>

<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal">
        <div class="row g-3">
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Primary">@Localizer["Tag1"]</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Secondary">@Localizer["Tag2"]</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Success">@Localizer["Tag3"]</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Danger">@Localizer["Tag4"]</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Warning">@Localizer["Tag5"]</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Info">@Localizer["Tag6"]</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Dark">@Localizer["Tag7"]</Tag>
            </div>
        </div>
</DemoBlock>

<DemoBlock Title="@Localizer["CloseButtonTitle"]" Introduction="@Localizer["CloseButtonIntro"]" Name="CloseButton">
        <div class="row g-3">
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Primary" ShowDismiss="true" OnDismiss="@DismissClick">@Localizer["Tag1"]</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Secondary" ShowDismiss="true" OnDismiss="@DismissClick">@Localizer["Tag2"]</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Success" ShowDismiss="true" OnDismiss="@DismissClick">@Localizer["Tag3"]</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Danger" ShowDismiss="true" OnDismiss="@DismissClick">@Localizer["Tag4"]</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Warning" ShowDismiss="true" OnDismiss="@DismissClick">@Localizer["Tag5"]</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Info" ShowDismiss="true" OnDismiss="@DismissClick">@Localizer["Tag6"]</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Dark" ShowDismiss="true" OnDismiss="@DismissClick">@Localizer["Tag7"]</Tag>
            </div>
        </div>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="@Localizer["IconTitle"]" Introduction="@Localizer["IcoIntro"]" Name="Icon">
        <div class="row g-3">
            <div class="col-4 col-sm-auto">
                <Tag Icon="fa fa-fw fa-check-circle" Color="Color.Success">@Localizer["Tag1"]</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Icon="fa fa-fw fa-warning" Color="Color.Warning">@Localizer["Tag2"]</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Icon="fa fa-fw fa-question-circle" Color="Color.Info">@Localizer["Tag3"]</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Icon="fa fa-fw fa-times-circle" Color="Color.Danger">@Localizer["Tag4"]</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Icon="fa fa-fw fa-angle-left" Color="Color.Primary">@Localizer["Tag5"]</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Icon="fa fa-fw fa-user" Color="Color.Dark">@Localizer["Tag6"]</Tag>
            </div>
        </div>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />
